<template>
  <div class="main_details">
    <div class="left">
      <div class="main_left1">
        <img class="main_icon" src="@/assets/index/iocn_usdt.png" alt="" />
        <div class="main_text">{{data.u}}</div>
      </div>
      <div class="main_left2">
        <img class="main_icon" src="@/assets/index/icon_kos.png" alt="" />
        <div class="main_text">{{data.token}}</div>
      </div>
    </div>
    <div class="main_title">
      <img class="icon" src="@/assets/index/head.png" alt="" />
    </div>
    <div class="right">
      <div class="main_right1">
        <img
          class="main_icon"
          src="@/assets/index/icon_combat_values.png"
          alt=""
        />
        <div class="main_text_1">{{data.myPower}}</div>
      </div>
      <div class="main_right2">
        <img class="main_icon" src="@/assets/index/icon_fire.png" alt="" />
        <div class="main_text_1">{{data.totalPower}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import http from "../../http";

  export default {
    data(){
      return {
        data: {
          u: '-',
          token: '-',
          myPower: '-',
          totalPower: '-'
        }
      }
    },
    methods: {
      getMoney: async function(){
        let res = await http.get(`/api/wallet/moneyAndData`);
        if (res.code === 200) {
          this.data = res.data;
        }
      }
    },
    mounted() {
      this.getMoney();
    },
    watch: {
      '$route' (to,from){
        if(to.path === "/TruckMining" && from.path === "/TruckMining"){
          this.getMoney();
        }
      }
    },
  }

</script>

<style scoped  lang="scss">
.main_details {
  height: 100px;
  background: url("@/assets/index/WechatIMG165.png") center no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.left,
.right {
  flex: 1;
  padding: 26px 0px 14px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  & > div {
    display: inline-block;
    position: relative;
  }
}
.left {
  align-items: flex-end;
  .main_icon {
    position: absolute;
    left: 0;
    top: 0px;
  }
}
.right {
  align-items: flex-start;
  .main_icon {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.main_title {
  display: flex;
  justify-content: center;
  width: 124px;
  height: 100%;
  padding-top: 10px;
  .icon {
    width: auto;
    height: 55px;
  }
}

.main_icon {
  width: 24px;
  height: auto;
  z-index: 2;
}

.main_text {
  width: 98px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #d3b13c;
  border-radius: 10px;
  padding-left: 26px;
  font-size: 11px;
  color: #d3b13c;
  text-align: left;
}

.main_text_1 {
  width: 98px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #d3b13c;
  border-radius: 10px;
  padding-left: 14px;
  font-size: 11px;
  color: #d3b13c;
  text-align: left;
}
</style>
